<template>
  <div style="padding-left: 1px;">
    <p style="height: 36px;margin-bottom: 5px">
      <Row>
        <Col span="24">
          <Button @click="toBack" size="large" type="ghost" icon="ios-skipbackward"></Button>
          <DatePicker v-model="month" transfer type="month" placeholder="请选择月份" size="large" style="width: 200px"></DatePicker>
          <Button @click="toNext" size="large" type="ghost" icon="ios-skipforward"></Button>
          <Select v-model="userId" clearable filterable size="large" placeholder="请选择员工" style="width: 200px">
            <Option v-for="item in users" :value="item.id" :key="item.id">{{ item.username }}</Option>
          </Select>
        </Col>
      </Row>
    </p>
    <Row>
      <Col :span="3">
        <Card :dis-hover="true" style="backgroundColor: #ECF2F7;height: 58px">
          <p align="right">周一</p>
        </Card>
      </Col>
      <Col :span="3">
        <Card :dis-hover="true" style="backgroundColor: #ECF2F7;height: 58px">
          <p align="right">周二</p>
        </Card>
      </Col>
      <Col :span="3">
        <Card :dis-hover="true" style="backgroundColor: #ECF2F7;height: 58px">
          <p align="right">周三</p>
        </Card>
      </Col>
      <Col :span="3">
        <Card :dis-hover="true" style="backgroundColor: #ECF2F7;height: 58px">
          <p align="right">周四</p>
        </Card>
      </Col>
      <Col :span="3">
        <Card :dis-hover="true" style="backgroundColor: #ECF2F7;height: 58px">
          <p align="right">周五</p>
        </Card>
      </Col>
      <Col :span="3">
        <Card :dis-hover="true" style="backgroundColor: #ECF2F7;height: 58px">
          <p align="right">周六</p>
        </Card>
      </Col>
      <Col :span="3">
        <Card :dis-hover="true" style="backgroundColor: #ECF2F7;height: 58px">
          <p align="right">周日</p>
        </Card>
      </Col>
    </Row>
    <Row v-for="(items,index) in data" :key="index">
      <Col :span="3" v-for="(item,index) in items" :key="index">
        <Card style="height: 100%">
          <div v-if="item.isDay === 0" style="padding: 5px;overflow-y: auto;height: 300px" v-bind:class="[activeClass1]" align="right">
            <label v-if="item.day !== -1">{{item.day}}</label>
            <Row v-for="(recruitment,index) in item.recruitmentList" :key="index">
              <Col align="left" span="24">
                <Tooltip transfer :content="recruitment.startTimeStr" placement="right"><Tag style="width: 100px;margin-left: 30%" type="dot" color="yellow" checkable>{{recruitment.userName}}</Tag></Tooltip>
              </Col>
            </Row>
          </div>
          <div v-if="item.isDay === 1" style="padding: 5px;overflow-y: auto;height: 300px" v-bind:class="[activeClass2]" align="right">
            <label v-if="item.day !== -1">{{item.day}}</label>
            <Row v-for="(recruitment,index) in item.recruitmentList" :key="index">
              <Col align="left" span="24">
                <Tooltip transfer :content="recruitment.startTimeStr" placement="right"><Tag style="width: 100px;margin-left: 30%" type="dot" color="yellow" checkable>{{recruitment.userName}}</Tag></Tooltip>
              </Col>
            </Row>
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<style>
  .active1{
    height: 120px;
    background-color: #fff;
  }
  .active2{
    height: 120px;
    background-color: #FFC;
  }
</style>
<script>
    import iviewTable from '@/view/common/table/Table.vue';
    import iviewPage from '@/view/common/page/Page.vue';
    export default {
        components: {
            iviewTable,
            iviewPage
        },
        data () {
            return {
                baseURL: '/user/attendance',
                month: '',
                userId: '0',
                data: [],
                users: [],
                activeClass1: 'active1',
                activeClass2: 'active2'
            }
        },
        methods: {
            loadUser () {
                let url = '/user/findAll'
                this.$ajax.get(url).then(r => {
                    let {code, data, msg} = r.data
                    if (code === 0) {
                        this.users = data
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            enterClass (ev) {
                if (ev.target.localName === 'div') {
                    ev.target.style.backgroundColor = '#FFC'// #C0DDF2
                }
            },
            outClass (ev) {
                if (ev.target.localName === 'div') {
                    ev.target.style.backgroundColor = '#fff'
                }
            },
            refresh () {
                let url = this.baseURL + '/getCalendar/' + this.month + '/' + this.userId
                this.$ajax.get(url).then(response => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        this.data = data
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            toBack () {
                this.month = this.$moment(this.month).subtract(1, "months").format("YYYY-MM")
            },
            toNext () {
                this.month = this.$moment(this.month).add(1, "months").format("YYYY-MM")
            },
            changeSelect (selection) {
                this.selectRows = selection
            },
            changeTotalSize (totalSize) {
                this.pageModel.totalSize = totalSize
            },
            changePageNumber (pageNumber) {
                this.pageModel.pageNumber = pageNumber
            },
            changePageSize (pageSize) {
                this.pageModel.pageSize = pageSize
            },
            init () {
                this.month = this.$moment().format('YYYY-MM')
                this.refresh()
            }
        },
        mounted () {
            // 加载用户
            this.loadUser()
            this.init()
        },
        watch: {
            month: function (val, oldVal) {
                this.month = this.$moment(val).format("YYYY-MM")
                this.refresh()
            },
            userId: function (val, oldVal) {
                if (!val || val === '') {
                    this.userId = '0'
                }
                this.refresh()
            }
        }
    }
</script>

<style>

</style>
